<template>
  <div class="storeManage">
    <div class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <p>类型编号</p>
          <el-input placeholder="请输入" v-model="form.like_code"></el-input>
        </el-col>
        <el-col :span="6">
          <p>类型名称</p>
          <el-input placeholder="请输入" v-model="form.like_name"></el-input>
        </el-col>
        <el-col :span="6" class="btn1">
          <div class="btn">
            <el-button type="warning" @click="searchFn">搜索</el-button>
            <el-button @click="cancle">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <button class="addBtn" @click="open">
        新增货品类型
      </button>
      <el-table
        :data="tableList"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="code" label="货品编号"> </el-table-column>
        <el-table-column prop="name" label="货品名称"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
        <el-table-column label="操作" width="150" class="last">
          <template slot-scope="scope">
            <el-button
              @click="edit(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="deleteFn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <page-tool
        :total="tableData.total"
        :paginationPage="tableData.pages"
        :paginationPagesize="tableData.size"
        @pageChange="pageChangeFn"
        @pageSizeChange="pageSizeChangeFn"
      />
    </div>
    <el-dialog :title="shop.id? '修改货品类型':'添加货品类型'" :visible="dialogVisible" width="30%" @close="closeFn">
      <el-form :model="shop" :rules="rules">
        <el-form-item label="货品类型编码" prop="code">
          <el-input v-model="shop.code" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="货品类型名称" prop="name">
          <el-input v-model="shop.name" autocomplete="off" placeholder="请输入货品类型名称"></el-input>
        </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn()">取 消</el-button>
        <el-button type="primary" @click="confirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getCode, add, edit, editSubmit } from '@/api/baseInfo/shoppingType'
import PageTool from '@/components/page-tool/PageTool.vue'
export default {
  components: { PageTool },
  name: 'storeManage-page',
  data () {
    return {
      form: {
        id: '',
        like_name: '',
        like_code: '',
        size: 10,
        current: 1,
        descs: 'createTime'
      },
      tableData: {},
      tableList: [],
      dialogVisible: false,
      shop: {
        code: '',
        name: ''
      },
      rules: {
        code: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }]

      }
    }
  },

  methods: {
    // 搜索按钮
    async searchFn () {
      const res = await getList(this.form)

      this.tableList = res.data.records
      this.tableData = res.data
    },

    pageChangeFn (pageNum) {
      console.log(pageNum)
      this.form.current = pageNum
      this.getList()
    },

    pageSizeChangeFn (pageSize) {
      console.log(pageSize)
      this.form.size = pageSize
      this.getList()
    },
    // 重置按钮
    cancle () {
      this.form = {
        code: '',
        name: '',
        ownerName: ''
      }
      this.getList()
    },
    // 删除
    deleteFn (id) {
      console.log(id)
      this.$notify({
        title: '警告',
        message: '该系统只作演示，不支持该操作',
        type: 'warning'
      })
    },

    // 打开弹窗
    open () {
      this.dialogVisible = true
    },
    async edit (row) {
      this.dialogVisible = true
      const { data } = await edit(row.id)
      this.shop = data
    },
    closeFn () {
      this.shop.name = ''
      this.dialogVisible = false
    },
    async confirm () {
      if (!this.shop.id) {
        await add(this.shop)
        this.$message.success('操作成功')
        this.closeFn()
        this.getList()
      } else {
        await editSubmit(this.shop)
        this.$message.success('操作成功')
        this.closeFn()
        this.getList()
      }
    },

    async getList () {
      const res = await getList(this.form)
      console.log(res)
      this.tableData = res.data
      this.tableList = res.data.records
    },

    async getCode () {
      const { data } = await getCode()
      this.shop.code = data
    }
  },
  created () {
    this.getList()
    this.getCode()
  }
}
</script>

<style lang="scss" scoped>
.storeManage {
  .head {
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
    p {
      margin-bottom: 10px;
      height: 18px;
      font-size: 12px;
      color: #887e7e;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
    }
    .el-select {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }
    .el-input {
      ::v-deep .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 1px solid #f8f5f5;
        background: #f8f5f5;
        border-radius: 6px;
      }
    }

    .btn1 {
      float: right;
      .btn {
        float: right;
        margin-top: 25px;
        .el-button {
          border-radius: 20px;
        }
      }
    }
  }
  .content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    .addBtn {
      margin-left: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
      background: #00be76;
      color: #fff;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
    }
    .el-table {
      ::v-deep .el-table__header-wrapper {
        th {
          background: rgb(249, 246, 238);
          text-align: center;
        }
      }
      ::v-deep .el-table__body-wrapper {
        td {
          text-align: center;
        }
      }
    }
  }
  .el-dialog__wrapper {
    ::v-deep .el-dialog__header{
      .el-dialog__title {
        line-height: 24px;
        font-size: 16px;
        color: #303133;
        font-weight: 700;
      }
    }
    ::v-deep .el-dialog__body {
      padding: 0 20px;
      .el-form-item{
        margin-bottom: 8px;
        .el-input__inner{
          background-color: #f3ebeb;
          border-color: #f3ebeb;
          color: #b5abab;

        }
        .el-form-item__label {
          font-size: 12px;
          font-family: PingFangSC,PingFangSC-Medium;
          font-weight: 500;
          color: #887e7e;
        }
      }
    }
    .dialog-footer {
      .el-button--primary {
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC,PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        background: #ffb200;
        color: #332929;
      }
      .el-button--default {
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC,PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        background: #f8f5f5;
        color: #332929;
      }
    }
  }
}
</style>
